/**
 * 响应式设计和兼容性端到端测试
 * 测试不同设备、浏览器和屏幕尺寸的兼容性
 */
describe('响应式设计和兼容性测试', () => {
  const devices = [
    { name: 'Desktop', viewport: [1920, 1080] },
    { name: 'Laptop', viewport: [1366, 768] },
    { name: 'Tablet', viewport: [768, 1024] },
    { name: 'Mobile', viewport: [375, 667] },
    { name: 'Small Mobile', viewport: [320, 568] }
  ]

  describe('响应式布局测试', () => {
    devices.forEach(device => {
      it(`应该在${device.name}设备上正确显示`, () => {
        cy.viewport(device.viewport[0], device.viewport[1])
        cy.visit('/')
        
        // 验证主菜单布局
        cy.get('[data-cy="main-menu"]').should('be.visible')
        cy.get('[data-cy="game-title"]').should('be.visible')
        cy.get('[data-cy="start-game-btn"]').should('be.visible')
        
        // 验证按钮大小适配
        if (device.viewport[0] < 768) {
          // 移动设备应该有更大的按钮
          cy.get('[data-cy="start-game-btn"]').should('have.class', 'mobile-size')
        }
        
        // 开始游戏测试布局
        cy.startNewGame()
        cy.selectCharacter('default')
        
        // 验证游戏界面布局
        cy.get('[data-cy="game-canvas"]').should('be.visible')
        cy.get('[data-cy="score-display"]').should('be.visible')
        cy.get('[data-cy="health-bar"]').should('be.visible')
        
        // 验证控制界面
        if (device.viewport[0] < 768) {
          // 移动设备应该显示触摸控制
          cy.get('[data-cy="touch-controls"]').should('be.visible')
        } else {
          // 桌面设备应该显示键盘提示
          cy.get('[data-cy="keyboard-hints"]').should('be.visible')
        }
      })
    })

    it('应该在横屏和竖屏间切换', () => {
      // 竖屏模式
      cy.viewport(375, 667)
      cy.visit('/')
      cy.startNewGame()
      cy.selectCharacter('default')
      
      // 验证竖屏布局
      cy.get('[data-cy="game-container"]').should('have.class', 'portrait')
      cy.get('[data-cy="ui-layout"]').should('have.class', 'vertical')
      
      // 切换到横屏
      cy.viewport(667, 375)
      
      // 验证横屏布局
      cy.get('[data-cy="game-container"]').should('have.class', 'landscape')
      cy.get('[data-cy="ui-layout"]').should('have.class', 'horizontal')
      
      // 验证横屏提示（如果是移动设备）
      cy.get('[data-cy="orientation-hint"]').should('be.visible')
    })

    it('应该适配超宽屏显示器', () => {
      cy.viewport(3440, 1440) // 21:9 超宽屏
      cy.visit('/')
      
      // 验证超宽屏适配
      cy.get('[data-cy="game-container"]').should('have.class', 'ultrawide')
      cy.get('[data-cy="game-canvas"]').should('have.css', 'max-width')
      
      // 验证侧边栏显示
      cy.get('[data-cy="side-panels"]').should('be.visible')
    })

    it('应该处理动态视口变化', () => {
      cy.viewport(1920, 1080)
      cy.visit('/')
      cy.startNewGame()
      cy.selectCharacter('default')
      
      // 动态改变视口大小
      cy.viewport(768, 1024)
      cy.wait(500)
      
      // 验证布局重新计算
      cy.get('[data-cy="game-canvas"]').should('have.attr', 'width')
      cy.get('[data-cy="game-canvas"]').should('have.attr', 'height')
      
      // 验证UI元素重新定位
      cy.get('[data-cy="score-display"]').should('be.visible')
      cy.get('[data-cy="health-bar"]').should('be.visible')
    })
  })

  describe('触摸交互测试', () => {
    beforeEach(() => {
      cy.viewport('iphone-x')
      cy.visit('/')
    })

    it('应该支持触摸导航', () => {
      // 测试菜单触摸
      cy.get('[data-cy="start-game-btn"]').should('be.visible')
      cy.get('[data-cy="start-game-btn"]').click()
      
      // 测试角色选择触摸
      cy.get('[data-cy="character-default"]').click()
      cy.get('[data-cy="confirm-character-btn"]').click()
      
      // 验证游戏开始
      cy.waitForGameLoad()
    })

    it('应该支持手势控制', () => {
      cy.startNewGame()
      cy.selectCharacter('default')
      
      // 测试滑动手势
      cy.get('[data-cy="game-canvas"]')
        .trigger('touchstart', { touches: [{ clientX: 200, clientY: 400 }] })
        .trigger('touchmove', { touches: [{ clientX: 200, clientY: 200 }] })
        .trigger('touchend')
      
      // 验证跳跃响应
      cy.get('[data-cy="player-sprite"]').should('have.class', 'jumping')
    })

    it('应该支持多点触控', () => {
      cy.startNewGame()
      cy.selectCharacter('default')
      
      // 测试双指操作
      cy.get('[data-cy="game-canvas"]')
        .trigger('touchstart', { 
          touches: [
            { clientX: 100, clientY: 300 },
            { clientX: 300, clientY: 300 }
          ] 
        })
        .trigger('touchend')
      
      // 验证特殊操作响应
      cy.get('[data-cy="special-action-indicator"]').should('be.visible')
    })

    it('应该防止意外触摸', () => {
      cy.startNewGame()
      cy.selectCharacter('default')
      
      // 测试边缘触摸
      cy.get('body')
        .trigger('touchstart', { touches: [{ clientX: 10, clientY: 10 }] })
        .trigger('touchend')
      
      // 验证没有意外操作
      cy.window().its('gameStore').then((store) => {
        expect(store.player.isJumping).to.be.false
      })
    })

    it('应该有适当的触摸反馈', () => {
      cy.startNewGame()
      cy.selectCharacter('default')
      
      // 点击触摸按钮
      cy.get('[data-cy="jump-btn"]').click()
      
      // 验证视觉反馈
      cy.get('[data-cy="jump-btn"]').should('have.class', 'pressed')
      
      // 验证触觉反馈（如果支持）
      cy.window().then((win) => {
        if ('vibrate' in win.navigator) {
          // 验证震动被触发
          expect(win.navigator.vibrate).to.have.been.called
        }
      })
    })
  })

  describe('浏览器兼容性测试', () => {
    it('应该检测浏览器功能支持', () => {
      cy.visit('/')
      
      // 验证功能检测
      cy.window().then((win) => {
        // Canvas支持检测
        expect(win.browserSupport.canvas).to.be.true
        
        // Web Audio API支持检测
        expect(win.browserSupport.webAudio).to.exist
        
        // LocalStorage支持检测
        expect(win.browserSupport.localStorage).to.be.true
        
        // RequestAnimationFrame支持检测
        expect(win.browserSupport.requestAnimationFrame).to.be.true
      })
    })

    it('应该显示不支持的功能警告', () => {
      // 模拟不支持Canvas
      cy.window().then((win) => {
        Object.defineProperty(win.HTMLCanvasElement.prototype, 'getContext', {
          value: () => null,
          writable: false
        })
      })
      
      cy.reload()
      
      // 验证兼容性警告
      cy.get('[data-cy="compatibility-warning"]').should('be.visible')
      cy.get('[data-cy="canvas-not-supported"]').should('be.visible')
    })

    it('应该提供功能降级方案', () => {
      // 模拟旧浏览器环境
      cy.window().then((win) => {
        // 移除现代API
        delete win.requestAnimationFrame
        delete win.AudioContext
        // @ts-ignore - webkitAudioContext 是旧版本浏览器的API
        delete win.webkitAudioContext
      })
      
      cy.reload()
      cy.startNewGame()
      cy.selectCharacter('default')
      
      // 验证降级模式
      cy.get('[data-cy="fallback-mode"]').should('be.visible')
      cy.get('[data-cy="css-animation-mode"]').should('be.visible')
    })

    it('应该处理CSS功能支持', () => {
      cy.visit('/')
      
      // 验证CSS功能检测
      cy.get('body').should('have.class', 'css-grid-support')
      cy.get('body').should('have.class', 'css-flexbox-support')
      cy.get('body').should('have.class', 'css-transforms-support')
    })

    it('应该适配不同的像素密度', () => {
      // 测试高DPI显示器
      cy.window().then((win) => {
        Object.defineProperty(win, 'devicePixelRatio', {
          value: 2,
          writable: false
        })
      })
      
      cy.reload()
      cy.startNewGame()
      cy.selectCharacter('default')
      
      // 验证高DPI适配
      cy.get('[data-cy="game-canvas"]').should('have.attr', 'style')
        .and('include', 'image-rendering')
    })
  })

  describe('性能适配测试', () => {
    it('应该根据设备性能调整设置', () => {
      // 模拟低性能设备
      cy.window().then((win) => {
        Object.defineProperty(win.navigator, 'hardwareConcurrency', {
          value: 2,
          writable: false
        })
        
        if (win.navigator.deviceMemory) {
          Object.defineProperty(win.navigator, 'deviceMemory', {
            value: 2,
            writable: false
          })
        }
      })
      
      cy.reload()
      cy.startNewGame()
      cy.selectCharacter('default')
      
      // 验证性能优化
      cy.window().its('gameStore').then((store) => {
        expect(store.settings.graphicsQuality).to.equal('low')
        expect(store.settings.particleEffects).to.be.false
      })
    })

    it('应该监控性能并自动调整', () => {
      cy.startNewGame()
      cy.selectCharacter('default')
      
      // 模拟性能下降
      cy.window().then((win) => {
        win.gameEngine.averageFPS = 20 // 低于30FPS
        win.dispatchEvent(new CustomEvent('performance-warning'))
      })
      
      // 验证自动优化
      cy.get('[data-cy="performance-optimization-notification"]').should('be.visible')
      cy.window().its('gameStore').then((store) => {
        expect(store.settings.autoOptimization).to.be.true
      })
    })

    it('应该提供性能统计', () => {
      cy.startNewGame()
      cy.selectCharacter('default')
      
      // 打开性能面板
      cy.get('body').type('{ctrl}{shift}p')
      
      // 验证性能统计显示
      cy.get('[data-cy="performance-stats"]').should('be.visible')
      cy.get('[data-cy="fps-counter"]').should('be.visible')
      cy.get('[data-cy="memory-usage"]').should('be.visible')
      cy.get('[data-cy="render-time"]').should('be.visible')
    })
  })

  describe('可访问性测试', () => {
    it('应该支持屏幕阅读器', () => {
      cy.visit('/')
      
      // 验证ARIA标签
      cy.get('[data-cy="main-menu"]').should('have.attr', 'role', 'main')
      cy.get('[data-cy="start-game-btn"]').should('have.attr', 'aria-label')
      cy.get('[data-cy="game-title"]').should('have.attr', 'aria-level', '1')
    })

    it('应该支持键盘导航', () => {
      cy.visit('/')
      
      // 测试Tab导航
      cy.get('body').tab()
      cy.focused().should('have.attr', 'data-cy', 'start-game-btn')
      
      cy.get('body').tab()
      cy.focused().should('have.attr', 'data-cy', 'settings-btn')
      
      cy.get('body').tab()
      cy.focused().should('have.attr', 'data-cy', 'achievements-btn')
    })

    it('应该支持高对比度模式', () => {
      // 启用高对比度
      cy.window().then((win) => {
        // @ts-ignore - 模拟 matchMedia 方法
        win.matchMedia = (query) => ({
          matches: query === '(prefers-contrast: high)',
          addListener: () => {},
          removeListener: () => {},
          media: query,
          onchange: null,
          addEventListener: () => {},
          removeEventListener: () => {},
          dispatchEvent: () => true
        })
      })
      
      cy.reload()
      
      // 验证高对比度样式
      cy.get('body').should('have.class', 'high-contrast')
    })

    it('应该支持减少动画偏好', () => {
      // 启用减少动画
      cy.window().then((win) => {
        // @ts-ignore - 模拟 matchMedia 方法
        win.matchMedia = (query) => ({
          matches: query === '(prefers-reduced-motion: reduce)',
          addListener: () => {},
          removeListener: () => {},
          media: query,
          onchange: null,
          addEventListener: () => {},
          removeEventListener: () => {},
          dispatchEvent: () => true
        })
      })
      
      cy.reload()
      
      // 验证动画减少
      cy.get('body').should('have.class', 'reduce-motion')
    })

    it('应该有适当的焦点指示器', () => {
      cy.visit('/')
      
      // 测试焦点样式
      cy.get('[data-cy="start-game-btn"]').focus()
      cy.get('[data-cy="start-game-btn"]').should('have.class', 'focus-visible')
      
      // 验证焦点轮廓
      cy.get('[data-cy="start-game-btn"]').should('have.css', 'outline')
    })
  })
})